<!DOCTYPE html>
<html>
<head lang="kr">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>8.4 [Combo Chart] line and scatter</title>
    <link rel="stylesheet" type="text/css" href="../dist/tui-chart.css" />

    <link rel='stylesheet' type='text/css' href='../node_modules/codemirror/lib/codemirror.css'/>
    <link rel='stylesheet' type='text/css' href='../node_modules/codemirror/addon/lint/lint.css'/>
    <link rel='stylesheet' type='text/css' href='./css/example.css'/>
</head>
<body>
<div class='wrap'>
    <div class='code-html' id='code-html'>
        <div id='chart-area'></div>
    </div>
</div>
<div class='custom-area'>
    <div id='error-dim'>
        <span id='error-text'></span>
        <div id='error-stack'></div>
        <span id='go-to-dev-tool'>For more detail, open browser's developer tool and check it out.</span>
    </div>
    <div style='border: 0.2px solid #aaa;'>
        <textarea id='code'></textarea>
    </div>

    <div class='apply-btn-area' style='width: 600px;'>
        <button class="btn" style='position: absolute; right: 0px;' onclick='evaluationCode(chartCM, codeString);'>Run it!
        </button>
        <button class="btn" onclick="window.open('https://github.com/nhnent/tui.chart/wiki/theme')">More Theme
        </button>
    </div>
</div>
<!--Import chart.js and dependencies-->
<script type='text/javascript' src='https://rawgit.com/nhnent/tui.code-snippet/v1.2.5/dist/tui-code-snippet.js'></script>
<script type='text/javascript' src='https://rawgit.com/nhnent/raphael/v2.2.0b/raphael.js'></script>
<script src='../dist/tui-chart.js'></script>
<script class='code-js' id='code-js'>
var container = document.getElementById('chart-area');
var data = {
    series: {
        scatter: [
            {
                name: 'Efficiency',
                data: [
                    { x: 10, y: 20 },
                    { x: 14, y: 30 },
                    { x: 18, y: 10 },
                    { x: 20, y: 30 },
                    { x: 24, y: 15 },
                    { x: 25, y: 25 },
                    { x: 26, y: 5 },
                    { x: 30, y: 35 },
                    { x: 34, y: 15 },
                    { x: 36, y: 35 },
                    { x: 37, y: 40 },
                    { x: 38, y: 20 },
                    { x: 40, y: 30 },
                    { x: 42, y: 50 },
                    { x: 46, y: 40 },
                    { x: 47, y: 50 },
                    { x: 48, y: 60 },
                    { x: 50, y: 55 },
                    { x: 54, y: 50 },
                    { x: 58, y: 62 },
                    { x: 58, y: 47 },
                    { x: 62, y: 66 },
                    { x: 66, y: 42 },
                    { x: 65, y: 52 },
                    { x: 70, y: 54 },
                    { x: 74, y: 32 },
                    { x: 78, y: 48 },
                    { x: 82, y: 54 },
                    { x: 86, y: 40 },
                    { x: 90, y: 30 }
                ]
            }
        ],
        line: [
            {
                name: 'Expenses',
                data: [
                    { x: 0, y: 10 },
                    { x: 30, y: 11 },
                    { x: 60, y: 50 },
                    { x: 70, y: 99 }
                ]
            }
        ]
    }
};
var options = {
    chart: {
        width: 1160,
        height: 540,
        title: 'Efficiency vs Expenses'
    },
    yAxis: {
        title: 'Percentage (%)'
    },
    xAxis: {
        title: 'Temperature (C)'
    },
    series: {
        line: {
            spline: true
        }
    }
};
var theme = {
    series: {
        scatter: {
            colors: ['#ffb840']
        },
        line: {
            colors: ['#785fff']
        }
    }
};

// For apply theme

// tui.chart.registerTheme('myTheme', theme);
// options.theme = 'myTheme';

var chart = tui.chart.comboChart(container, data, options);
</script>
<!--For tutorial page-->
<script src='../node_modules/codemirror/lib/codemirror.js'></script>
<script src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js'></script>
<script src='../node_modules/codemirror/addon/edit/matchbrackets.js'></script>
<script src='../node_modules/codemirror/addon/selection/active-line.js'></script>
<script src='../node_modules/codemirror/mode/javascript/javascript.js'></script>
<script src='../node_modules/codemirror/addon/lint/lint.js'></script>
<script src='../node_modules/codemirror/addon/lint/javascript-lint.js'></script>
<script src='./js/example.js'></script>
</body>
</html>
